<template>
  <div class="bg">
    <!-- 头部 -->
    <Header :title="title"></Header>

    <!-- 下拉框 -->
    <div class="LSelect_root" :style="`width: ${width}px`">
      <span class="label">{{ label }}</span>
      <el-select v-model="value" placeholder="请选择" size="mini" style="flex: 1">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <!-- 主要内容 -->
    <div class="content">
      <div class="main" v-if="value == 1">
        <img src="../../../assets/img/636866072053268805.jpg" alt />
        <div class="sub-box">
          <div>图例</div>
          <div class="sub-box-1">
            <div>常亮灯打开</div>
            <fixedPoint1 :top="(top = 3)" :left="(left = 4)" :background="background1"></fixedPoint1>
            <div>人体感应灯</div>
            <fixedPoint1 :top="(top = 3)" :left="(left = 10.3)" :background="background2"></fixedPoint1>
          </div>
          <div class="sub-box-1">
            <div>常亮灯关闭</div>
            <fixedPoint1 :top="(top = 5.7)" :left="(left = 4)"></fixedPoint1>
            <div>通讯异常</div>
            <img src="../../../assets/img/636812921633070028.png" alt="" />
          </div>
        </div>
        <fixedPoint1 :top="(top = 23.2)" :left="(left = 12.5)"></fixedPoint1>
        <fixedPoint1 :top="(top = 23.2)" :left="(left = 13.5)" :background="background1"></fixedPoint1>
        <fixedPoint1 :top="(top = 23.2)" :left="(left = 14.5)" :background="background2"></fixedPoint1>
        <div class="fixed" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          ">
          <div>
            <span>控制模式：</span>
            <span class="color">手动</span>
          </div>
          <div>
            <span>当前状态：</span>
            <span class="color-1">吸合</span>
          </div>
          <div>
            <span>手自动状态：</span>
            <span class="color">手动</span>
          </div>
          <div>
            <span>当前照度值：</span>
            <span class="color-2">128Lx</span>
          </div>
        </div>
        <div class="fixed fixed-1" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          ">
          <div>
            <span>控制模式：</span>
            <span class="color">手动</span>
          </div>
          <div>
            <span>当前状态：</span>
            <span class="color-1">吸合</span>
          </div>
          <div>
            <span>手自动状态：</span>
            <span class="color">手动</span>
          </div>
          <div>
            <span>当前照度值：</span>
            <span class="color-2">87Lx</span>
          </div>
        </div>
        <div class="fixed fixed-2" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          ">
          <div>
            <span>控制模式：</span>
            <span class="color-3">照度</span>
          </div>
          <div>
            <span>当前状态：</span>
            <span class="color-1">吸合</span>
          </div>
          <div>
            <span>手自动状态：</span>
            <span class="color">手动</span>
          </div>
          <div>
            <span>当前照度值：</span>
            <span class="color-2">87Lx</span>
          </div>
        </div>
        <div class="fixed1" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          ">
          <div style="margin: 0.5vw 0">
            <img src="../../../assets/img/636812921210757363.png" alt="" />
            <span>二层西照明控制设定</span>
          </div>
          <div>
            <span>照度上限值：</span>
            <span class="color-2">150Lx</span>
          </div>
          <div>
            <span>照度下限值：</span>
            <span class="color-2">90Lx</span>
          </div>
          <div>
            <span>照明启用时间：</span>
            <span class="color-2">700</span>
          </div>
          <div>
            <span>照明停用时间：</span>
            <span class="color-2">2300</span>
          </div>
        </div>
        <div class="fixed1 fixed1-1" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          ">
          <!-- <img src="../../../assets/img/636812921210757363.png" alt=""> -->
          <div style="margin: 0.5vw 0">
            <img src="../../../assets/img/636812921210757363.png" alt="" />
            <span>二层东照明控制设定</span>
          </div>
          <div>
            <span>照度上限值：</span>
            <span class="color-2">200Lx</span>
          </div>
          <div>
            <span>照度下限值：</span>
            <span class="color-2">130Lx</span>
          </div>
          <div>
            <span>照明启用时间：</span>
            <span class="color-2">700</span>
          </div>
          <div>
            <span>照明停用时间：</span>
            <span class="color-2">2300</span>
          </div>
        </div>
      </div>
      <div class="main" v-if="value == 2">
        <img src="../../../assets/img/636866072284515102.jpg" alt />
        <div class="sub-box">
          <div>图例</div>
          <div class="sub-box-1">
            <div>常亮灯打开</div>
            <fixedPoint1 :top="(top = 3)" :left="(left = 4)" :background="background1"></fixedPoint1>
            <div>人体感应灯</div>
            <fixedPoint1 :top="(top = 3)" :left="(left = 10.3)" :background="background2"></fixedPoint1>
          </div>
          <div class="sub-box-1">
            <div>常亮灯关闭</div>
            <fixedPoint1 :top="(top = 5.7)" :left="(left = 4)"></fixedPoint1>
            <div>通讯异常</div>
            <img src="../../../assets/img/636812921633070028.png" alt="" />
          </div>
        </div>
        <fixedPoint1 :top="(top = 25)" :left="(left = 13.5)" @click="
            (pop1_1 = true),
              (activeName = 'first'),
              (time1_1 = [new Date(), new Date()])
          "></fixedPoint1>
        <fixedPoint1 :top="(top = 25)" :left="(left = 14.5)" :background="background1"></fixedPoint1>
        <fixedPoint1 :top="(top = 25)" :left="(left = 15.5)" :background="background2"></fixedPoint1>
      </div>
    </div>

    <!-- 图片1-1弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="pop1_1" title="历史曲线展示" width="35%" :before-close="handleClose1_1">
        <span style="color: #fff">选择时间：</span>
        <el-date-picker v-model="time1_1" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        <el-button type="primary" style="margin-left: 15px">载入数据</el-button>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="曲线展示" name="first">
            <echarts4></echarts4>
          </el-tab-pane>
          <el-tab-pane label="数据展示" name="second">
            <div class="pane">
              <div class="btn">
                <div @click="expportCSV1_1">保存为csv格式</div>
                <div @click="expportExcel1_1">保存为excel格式</div>
                <div @click="expportPDF1_1">保存为pdf格式</div>
              </div>
              <el-table :data="tableData1_1" style="width: 100%" border class="table" height="315px" id="table">
                <el-table-column prop="time" label="日期"></el-table-column>
                <el-table-column prop="data" label="数据"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>

    <!-- 图片1-2弹出框 -->
    <div v-dialogdrag>
      <el-dialog v-model="pop1_2" title="历史曲线展示" width="35%" :before-close="handleClose1_2">
        <span style="color: #fff">选择时间：</span>
        <el-date-picker v-model="time1_2" type="daterange" range-separator="To" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
        <el-button type="primary" style="margin-left: 15px">载入数据</el-button>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="曲线展示" name="first">
            <echarts3></echarts3>
          </el-tab-pane>
          <el-tab-pane label="数据展示" name="second">
            <div class="pane">
              <div class="btn">
                <div @click="expportCSV1_2">保存为csv格式</div>
                <div @click="expportExcel1_2">保存为excel格式</div>
                <div @click="expportPDF1_2">保存为pdf格式</div>
              </div>
              <el-table :data="tableData1_2" style="width: 100%" border class="table" height="315px" id="table2">
                <el-table-column prop="time" label="日期"></el-table-column>
                <el-table-column prop="data" label="数据"></el-table-column>
              </el-table>
              <div class="page">
                <el-pagination v-model:currentPage="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import echarts4 from "@/components/echarts4.vue";
// import echarts3 from "@/components/echarts3.vue"
import fixedPoint1 from "@/components/fixedPoint1.vue";
import CsvExportor from "csv-exportor"; //导出csv
import htmlToPdf from "@/utils/htmlToPdf"; //导出pdf

export default {
  components: {
    echarts4,
    // echarts3,
    fixedPoint1,
    Header,
  },
  data() {
    return {
      title:"设备监控—公区照明系统",
      background1: "rgb(20, 189, 152)",
      background2: "rgb(65,105,225)",
      width: 330,
      label: " 楼层",
      value: 1,
      options: [
        {
          value: 1,
          label: "主楼二层",
        },
        {
          value: 2,
          label: "主楼三层",
        },
      ],
      pop1_1: false,
      activeName: "first",
      time1_1: [new Date(), new Date()],
      tableData1_1: [
        { time: "2022-01-12 01:00", data: "0.00" },
        { time: "2022-01-12 01:00", data: "0.08" },
        { time: "2022-01-12 02:00", data: "1.00" },
        { time: "2022-01-12 03:00", data: "1.50" },
        { time: "2022-01-12 04:00", data: "2.00" },
        { time: "2022-01-12 05:00", data: "0.00" },
        { time: "2022-01-12 06:00", data: "1.30" },
        { time: "2022-01-12 07:00", data: "2.40" },
        { time: "2022-01-12 08:00", data: "1.00" },
        { time: "2022-01-12 09:00", data: "1.20" },
      ],

      pop1_2: false,
      time1_2: [new Date(), new Date()],
      tableData1_2: [
        { time: "2022-01-12 01:00", data: "7.00" },
        { time: "2022-01-12 01:00", data: "7.08" },
        { time: "2022-01-12 02:00", data: "7.00" },
        { time: "2022-01-12 03:00", data: "7.50" },
        { time: "2022-01-12 04:00", data: "7.00" },
        { time: "2022-01-12 05:00", data: "7.00" },
        { time: "2022-01-12 06:00", data: "7.30" },
        { time: "2022-01-12 07:00", data: "7.40" },
        { time: "2022-01-12 08:00", data: "7.00" },
        { time: "2022-01-12 09:00", data: "7.20" },
      ],
    };
  },
  mounted() {},
  beforeUnmount() {},
  methods: {
    //导出CSV
    expportCSV1_1() {
      let tableData = this.tableData17_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "启停.csv");
    },
    //导出excel表格
    expportExcel1_1() {
      /** 
            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
            var html =
                "<html><head><meta charset='utf-8' /></head><body>" +
                document.getElementById("table").outerHTML +
                "</body></html>";
            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var a = document.getElementsByTagName("a")[1];
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名
            a.download = "室内温度.xls";
            */
      let tableData = this.tableData1_1;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "启停.xls");
    },
    //导出pdf
    expportPDF1_1() {
      htmlToPdf.downloadPDF(document.getElementById("table"), "启停");
    },

    //导出CSV
    expportCSV1_2() {
      let tableData = this.tableData17_2;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "冷冻供水温设定.csv");
    },
    //导出excel表格
    expportExcel1_2() {
      let tableData = this.tableData1_2;
      let header = ["日期", "数据"];
      CsvExportor.downloadCsv(tableData, { header }, "冷冻供水温设定.xls");
    },
    //导出pdf
    expportPDF1_2() {
      htmlToPdf.downloadPDF(
        document.getElementById("table2"),
        "冷冻供水温设定"
      );
    },
  },
};
</script>

<style lang="less" scoped>

.content {
  padding: 10px 0px 50px 0px;

  .main {
    position: relative;
    img {
      width: 92vw;
      height: 82vh;
      margin-left: 2.5vw;
    }

    .sub-box {
      width: 12vw;
      height: 8vh;
      border: 2px solid rgb(119, 136, 153);
      font-size: 6px;
      color: #000;
      padding: 0 4vh 0 1vh;
      position: absolute;
      left: 10vw;
      top: 3.5vh;

      div {
        line-height: 2.5vh;
      }

      .sub-box-1 {
        display: flex;
        justify-content: space-between;
        // align-items: center;

        img {
          width: 12px;
          height: 12px;
          position: absolute;
          top: 5.6vh;
          left: 7.8vw;
        }
      }
    }

    .color {
      color: rgb(230, 167, 31);
    }
    .color-1 {
      color: rgb(66, 147, 229);
    }
    .color-2 {
      color: rgb(0, 24, 255);
    }
    .color-3 {
      color: rgb(0, 128, 128);
    }

    .fixed {
      // text-align: center;
      width: 6vw;
      font-size: 6px;
      color: #000;
      border: 1px solid rgb(119, 136, 153);
      position: absolute;
      top: 29.3vh;
      left: 22.8vw;
      transform: scale(0.6, 0.6); //缩放

      &:hover {
        cursor: pointer;
      }
    }

    .fixed-1 {
      top: 42.5vh;
      transform: scale(0.6, 0.6); //缩放
    }

    .fixed-2 {
      top: 36vh;
      left: 29.2vw;
      transform: scale(0.6, 0.6); //缩放
    }

    .fixed1 {
      text-align: center;
      width: 8vw;
      font-size: 6px;
      color: #000;
      border: 1px solid rgb(119, 136, 153);
      position: absolute;
      top: 67vh;
      left: 20vw;

      &:hover {
        cursor: pointer;
      }

      img {
        width: 1.5vh;
        height: 1.5vh;
        display: inline;
        margin-left: 0;
      }
    }

    .fixed1-1 {
      left: 70vw;
    }
  }
}

//下拉条样式
.LSelect_root {
  height: 40px;
  background-image: url("../../../assets/img/1.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  padding: 0 6px 10px 20px;
  box-sizing: border-box;
  justify-content: space-between;

  .label {
    font-size: 15px;
    font-weight: 400;
    color: #b8f9ff;
    padding: 0 9px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
}

.pane {
  height: 400px !important;

  .btn {
    div {
      width: 120px;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      text-align: center;
      border: 1px solid rgba(225, 225, 225, 0.5);
      margin-right: 10px;
      color: #fff;
      border-radius: 5px;
    }
  }

  // 表格样式
  /deep/.el-table {
    margin-top: 15px;
    overflow: auto;
    background-color: transparent; //表格背景色
    --el-table-border-color: rgba(225, 225, 225, 0.5); //表格线
    --el-table-header-font-color: RGBA(114, 174, 255, 1); //栏目字体颜色
    --el-table-header-background-color: transparent; //栏目背景颜色
    --el-table-font-color: #72aeff; //内容字体颜色
    --el-table-tr-background-color: transparent; //表格背景色
    border-radius: 5px;

    .cell {
      text-align: center; //居中
    }

    th {
      padding: 0 !important;
      height: 35px;
      line-height: 35px;
      & > .cell {
        text-align: center; //居中
      }
    }

    td {
      padding: 0 !important;
      height: 35px;
      line-height: 35px;
    }
  }

  .page {
    position: relative;
    margin-top: 5px;
    /deep/.el-pagination {
      position: absolute;
      right: 10px;
      --el-pagination-font-color: #fff;
      --el-pagination-button-color: #fff;
    }
  }
}
</style>

<style scoped lang="less">
//弹出框标题样式
/deep/ .el-dialog {
  //  background-color: #2E5889;
  .el-dialog__title,
  .el-dialog__headerbtn {
    color: #fff; //弹出框标题
  }
  .el-dialog__body {
    padding: 5px 20px;
  }

  // 日期选择样式
  .el-range-editor.el-input__inner {
    border: 1px solid #ccc;
  }

  // to样式
  .el-date-editor .el-range-separator {
    width: 8%;
    color: #ccc;
  }
  // el-tabs样式
  .el-tabs__item {
    color: #fff;
    font-size: 12px;
    height: 30px;
    line-height: 30px !important;
    margin-top: 10px;
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 1px solid #ccc;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    &:first-child {
      border-right: 1px solid #72aeff;
    }

    &:last-child {
      border-left: 1px solid #72aeff;
    }
  }
  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border: 1px solid #72aeff;
    border-bottom: none;
    color: #72aeff;
  }
}
</style>
